import React, { useRef, useState } from "react";
import StoTable, { StoTableApi } from "../StoTable/StoTable";
import { getStudents } from "../../common/mockdata";
import StoPaginator from "../StoPaginator/StoPaginator";

// const students = getStudents(20);
// let page = 1;
// const pageSize = 10;

// const formatter = {
//   avatar: (student: any) => (
//     <a href={`/${student.id}`}>
//       <img src={student.avatar} alt="" />
//     </a>
//   ),

//   name: (student: any) => (
//     <a style={{ fontWeight: "bold" }} href={`/${student.id}`}>
//       {student.name}
//     </a>
//   ),
// };

type StoTableXProps = {
  data: Record<string, any>[];
  pageSize?: number;
  sortableKeys?: string[];
  formatter?: Record<string, (item: Object) => JSX.Element>;
  currentPage?: number;
};

const StoTableX: React.FC<StoTableXProps> = ({
  data,
  pageSize = 10,
  formatter = {},
  currentPage: page = 1,
}) => {
  // const [page, setPage] = useState(1);

  // useRef<子组件暴露出来的API类型>
  const childRef = useRef<StoTableApi>(null);

  return (
    <div style={{ width: 1000 }}>
      <StoTable
        ref={childRef}
        data={data}
        pageSize={pageSize}
        sortableKeys={["id", "name", "age", "gender"]}
        formatter={formatter}
        currentPage={page}
      ></StoTable>

      <StoPaginator
        totalPages={Math.ceil(data.length / pageSize)}
        currentPage={1}
        onPageChange={(n: number) => {
          console.log("onPageChange", n);
          childRef.current?.turnToPage(n);
        }}
      ></StoPaginator>
    </div>
  );
};

export default StoTableX;
